<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bedroom</title>
		<link rel="stylesheet" type="text/css" href="plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/global.css" />
		<link rel="stylesheet" type="text/css" href="css/bedroom.css"/>
		<script type="text/javascript">
			window.$ = window.jQuery = require('./jquery-3.3.1.min');
		</script>
		<script src="plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="plugins/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="plots.js" type="text/javascript" charset="utf-8"></script>
		<script src="libs.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<audio id="voice" src="">
			当前浏览器不支持audio
		</audio>
		<div id="show_day" style="text-align: center;font-size: 30px;">
			第
			<label>0</label>
			天
		</div>
		<div>
			<button type="button" class="btn btn-default btn-icon" onmouseover="e2c(voice, this, this.innerHTML);" onmouseleave="c2e(this, this.innerHTML);" onclick="show_map();">Map</button>
			<button type="button" class="btn btn-default btn-icon" onmouseover="e2c(voice, this, this.innerHTML);" onmouseleave="c2e(this, this.innerHTML);" onclick="sleep();">Sleep</button>
		</div>
		<div class="hidden" id="map">
			<a class="btn btn-link map_item" href="livingroom.html" onmouseover="e2c(voice, this, this.innerHTML);" onmouseleave="c2e(this, this.innerHTML);">livingroom</a>
		</div>
		<script type="text/javascript">
			var fs = require('fs');
			var voice = document.getElementById('voice');
			
			if (!fs.existsSync('current.json')) {
				layer.alert('Can\'t find current.json', {icon: 2});
			} else {
				var current_json_str = fs.readFileSync('current.json');
				var source_json_name = JSON.parse(current_json_str).target;
				var json_str = fs.readFileSync('archives/' + source_json_name);
				var json = JSON.parse(json_str.toString());
				$('#show_day label').html(json.day);
				json.local = 'bedroom';
				fs.writeFileSync('archives/' + source_json_name, JSON.stringify(json));
				
				if (json.plots === -1) {
					layer.open({
						closeBtn: 0,
						anim: 2,
						btn: 'I know!',
						title: 'Before start',
						content: '<p>This is a game to learn Chinese, you will explore this world.</p><p>Words learned in life will be automatically recorded in the computer, which is convenient for players to review.</p>',
						yes: function (index, dom) {
							json.plots = 0;
							fs.writeFileSync('archives/' + source_json_name, JSON.stringify(json));
							layer.close(index);
							_show_plot(json.plots, 0);
						},
					});
				} else {
					_show_plot(json.plots, 0);
				}
			}
			
			function _show_plot(plot_index, subplot_index) {
				var plot = show_plot(plot_index, subplot_index);
				if (plot !== '' && plot_index < 1) {
					if (fs.existsSync('audio/' + plot + '.mp3')) {
						voice.src = 'audio/' + plot + '.mp3';
						voice.play();
					}
					layer.open({
						offset: ['360px', '350px'],
						closeBtn: 0,
						btn: 'Next',
						title: 'Caption',
						content: plot,
						yes: function (index, dom) {
							layer.close(index);
							voice.pause();
							_show_plot(plot_index, subplot_index + 1);
						}
					});
				} else if (plot === '' && plot_index < 1) {
					json.record.push(plots[plot_index]['record']);
					++json.plots;
					fs.writeFileSync('archives/' + source_json_name, JSON.stringify(json));
				}
			}
			
			function sleep() {
				var black = $('<div></div>');
				black.attr('class', 'blackground');
				black.css({
					backgroundColor: '#000',
					opacity: 0.0,
					position: 'absolute',
					left: 0,
					top: 0,
					width: $(window).width(),
					height: $(window).height(),
				});
				$('body').append(black);
				
				black.animate({
					opacity: 1.0,
				}, 500);
				
				++json.day;
				fs.writeFileSync('archives/' + source_json_name, JSON.stringify(json));
				$('#show_day label').html(json.day);
				
				black.animate({
					opacity: 0.0,
				}, 500);
				
				setTimeout(function () {
					black.remove();
				}, 1000);
			}
		</script>
	</body>
</html>
